<template>
  <div :class="type+ ' box'" v-show="flag">{{text}}</div>
</template>

<script>
export default {
    data() {
        return {
            text:'',
            type:'',
            flag:false
        }
    },
}
</script>

<style lang='scss'>
$success:rgb(177, 233, 177);
$warning:rgb(240, 216, 172);
$error:rgb(233, 173, 173);
$bglist:(success:$success,warning:$warning,error:$error);
.box{
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 10px;
    background: #eee;
    margin: 10px auto;
}
@each $item,$value in $bglist{
    .message-#{$item}{
        background: $value;
    }
}
</style>